<template>
  <div>
    <template v-if="cValue.length > 0">
      <template v-if="pictureCard">
        <a-image
          :preview="{ visible: false }"
          :width="80"
          :src="cValue[0]"
          @click="visible = true"
        />
        <div style="display: none">
          <a-image-preview-group :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }">
            <a-image v-for="(src, index) in cValue" :key="index" :src="src" />
          </a-image-preview-group>
        </div>
      </template>
      <template v-else>
        <a-popover title="文件列表">
          <template #content>
            <p :key="index" v-for="(src, index) in cValue">{{ src }}</p>
          </template>
          <a-button>
            <Icon icon="bi:eye" />
            <template v-if="cValue.length && showPreviewNumber">
              {{ cValue.length }}
            </template>
          </a-button>
        </a-popover>
      </template>
    </template>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import {
    Image as AImage,
    ImagePreviewGroup as AImagePreviewGroup,
    Popover as APopover,
  } from 'ant-design-vue';
  import { Icon } from '@/components/Icon';

  const props = defineProps({
    value: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
    pictureCard: {
      type: Boolean,
      default: false,
    },
    showPreviewNumber: {
      type: Boolean,
      default: true,
    },
  });
  const visible = ref(false);
  const cValue = computed(() => {
    if (Array.isArray(props.value)) {
      return props.value;
    }
    if (typeof props.value === 'string' && props.value) {
      return props.value.split(',');
    }
    return [];
  });
</script>
<style lang="less" scoped></style>
